<template>
  <!-- 电催案件管理-团队案件池-页面 -->
  <section class="page tel-team-case-manage">
    <data-form :model="model" :page="pageService" :rules="rules" @handleResetForm="handleResetForm" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model.trim="model.caseNumber" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户号" prop="personalNo">
          <el-input v-model.trim="model.personalNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model.trim="model.personalName" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard">
          <el-input v-model.trim="model.idCard" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="账户总金额" prop="caseMoney">
          <number-range v-model="model.caseMoney"></number-range>
        </el-form-item>
        <el-form-item label="账户逾期总金额" prop="overdueAmount">
          <number-range v-model="model.overdueAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期期数" prop="overduePeriod">
          <number-range v-model="model.overduePeriod"></number-range>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range v-model="model.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="还款日" prop="payDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="model.payDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="model.payDate"></number-range>
          <!-- <el-input type="number" v-model="model.payDate"></el-input> -->
        </el-form-item>
        <el-form-item label="账单日" prop="billDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="model.billDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="model.billDate"></number-range>
          <!-- <el-input type="number" v-model="model.billDate"></el-input> -->
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model.trim="model.mobileNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="产品编号" prop="productNo">
          <el-input v-model.trim="model.productNo" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="队列代码" prop="queueCode">
          <el-input v-model.trim="model.queueCode" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="入催原因码" prop="reasonCode">
          <el-select v-model="model.reasonCode" placeholder="请选择" clearable>
            <el-option v-for="item in $dict.getDictData('ReasonCode')" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认锁定时间" prop="lockTime">
          <el-date-picker type="daterange" :editable="false" v-model="model.lockTime" placeholder="选择时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="指定锁定时间" prop="leaveDueDate">
          <el-date-picker type="daterange" :editable="false" v-model="model.leaveDueDate" placeholder="选择时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="AT" prop="at">
          <el-input v-model.trim="model.at" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="CT" prop="ct">
          <el-input v-model.trim="model.ct" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="最近跟进时间" prop="followupTime">
          <el-date-picker type="daterange" :editable="false" v-model="model.followupTime" placeholder="选择时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="机构号" prop="companyCode">
          <el-input v-model.trim="model.companyCode" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="组别号" prop="deptNo">
          <el-input v-model.trim="model.deptNo" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="经办代号" prop="currentCollectorCode">
          <el-input v-model.trim="model.currentCollectorCode" clearable :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="手工标识" prop="handworkCode">
          <el-select v-model="model.handworkCode" placeholder="请选择" clearable>
            <el-option v-for="item in handworkCodeArr" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="案件标记" prop="caseMark">
          <el-select v-model="model.caseMark" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData('CaseMark')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item> -->
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" :selectionList.sync="selectionList" @update:selectionList="this.onSelectionChange" @onPageChange="queryPageInfo" ref="data-box" :isSelectAll="isSelectAll">
      <template slot="buttons">
        <el-button @click="manualDivision" :disabled="selectionList.length === 0 && !isSelectAll" v-auth="20301">转派</el-button>
        <el-button @click="
            isSelectAll = true;
            selectionList = [];
          " v-if="!isSelectAll" :disabled="dataSet.length === 0" v-auth="20302">选择全部</el-button>
        <el-button @click="
            isSelectAll = false;
            selectionList = [];
          " type="danger" class="cancel-select-all" v-if="isSelectAll">取消选择全部</el-button>
      </template>
      <template slot="caseTotalInfo">
        <case-total-info :caseInfoData="caseTotalData" />
      </template>
      <template slot="columns">
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="账户号" prop="caseNumber" show-overflow-tooltip>
          <template slot-scope="scope">
            <a @click="openExecutionPage(scope.row)">{{
              scope.row.caseNumber
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="personalNo" label="客户号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip />
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(3)" />
        <el-table-column prop="idCard" label="证件号" :min-width="$helper.getColumnWidth(6)" />
        <el-table-column prop="mobileNo" label="手机号" :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="caseMoney" label="账户总金额" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.toThousands(row.caseMoney)" sortable />
        <el-table-column prop="overdueAmount" label="账户逾期总金额" :min-width="$helper.getColumnWidth(6)" :formatter="row => $filter.toThousands(row.overdueAmount)" sortable />
        <el-table-column prop="overduePeriod" label="逾期期数" :min-width="$helper.getColumnWidth(5)" sortable />
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(5)" sortable />
        <!-- <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.payDate)" sortable /> -->
        <!-- <el-table-column prop="billDate" label="账单日" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.billDate)" sortable /> -->
        <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(4)" sortable/>
        <el-table-column prop="billDate" label="账单日" :min-width="$helper.getColumnWidth(4)" sortable/>
        <el-table-column prop="productNo" label="产品编号" :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="handworkCode" label="手工标识" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip />
        <el-table-column prop="queueCode" label="队列代码" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip />
        <el-table-column prop="lockTime" label="默认锁定时间" :formatter="row => $filter.dateFormat(row.lockTime)" :min-width="$helper.getColumnWidth(5)" sortable />
        <el-table-column prop="companyCode" label="机构号" :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="deptNo" label="组别号" :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="currentCollectorCode" label="经办代号" show-overflow-tooltip :min-width="$helper.getColumnWidth(4)" />
        <el-table-column prop="leaveDueDate" label="指定锁定时间" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.dateFormat(row.leaveDueDate)" sortable />
        <!-- <el-table-column prop="loanDate" label="案件标记" :formatter="row => $filter.dateFormat(row.loanDate)" :min-width="$helper.getColumnWidth(5)" /> -->
        <el-table-column prop="distributeTime" label="分案时间" :formatter="row => $filter.dateFormat(row.distributeTime)" :min-width="$helper.getColumnWidth(5)" sortable />
        <el-table-column prop="closingCode" label="结案码" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="!scope.row.objectiveCode"></div>
            <div v-else>
              {{
                `${$filter.dictConvert(
                  scope.row.channelCode,
                  "QueueCategory"
                )}${scope.row.objectiveCode || ""}${scope.row.modifierCode ||
                  ""}`
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="followupTime" label="最新跟进时间" :formatter="row => $filter.dateTimeFormat(row.followupTime)" :min-width="$helper.getColumnWidth(5)" sortable />
      </template>
    </data-box>
    <!-- 转派弹框 -->
    <transfer-model :dialogOpen="transferDialog" :selectionList="selectionList" @dialogCancel="dialogCancel" @agentClose="dialogCancel" @confirmTransferDialog="
        confirmTransferDialog();
        dialogCancel();
      " :allData="allData" :type="type" :searchQuery="paramsHandler()"></transfer-model>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import NumberRange from "~/components/common/number-range.vue";
import { Getter, Mutation, State, namespace } from "vuex-class";
import { TelCaseManageService } from "~/services/domain-service/tel-case-manage.service";
import AddAgent from "~/components/queue-manage/add-agent.vue";
import { MENU_CHANNEL } from "~/config/enum.config";
import { CaseInfoService } from "~/services/domain-service/case-info.service";
import { QueueService } from "~/services/domain-service/queue-manage.service";
import TransferModel from "~/components/telephone-collection-manage/transferDialog.vue";
import CaseTotalInfo from "~/components/common/case-total-info.vue";
import { UserService } from "~/services/management-service/user.service";
import { Prop } from "vue-property-decorator";
import { LegalCaseManageService } from "~/services/domain-service/legal-case-manage.service";
const CollectionExecutionModule = namespace("collection-execution");

@Auth(203)
@Layout("workspace")
@Component({
  components: {
    TransferModel,
    AddAgent,
    NumberRange,
    CaseTotalInfo
  }
})
export default class TelTeamCaseManage extends Vue {
  @Dependencies(UserService) private userService: UserService;
  @Dependencies(QueueService) private queueService: QueueService;
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(SortService) private sortService: SortService;
  @Dependencies(TelCaseManageService)
  private telCaseManageService: TelCaseManageService;
  @Dependencies(CaseInfoService) private caseInfoService: CaseInfoService;
  @CollectionExecutionModule.Mutation private updatePersonalType;
  @Prop() private queueType;
  @Dependencies(LegalCaseManageService) private legallyCaseManageService: LegalCaseManageService;

  private allData: any[] = [];
  private isSelectAll: boolean = false;
  private transferDialog: boolean = false;
  private type: string = "team";
  private model: any = {
    handworkCode: '',
    personalNo: '',
    caseMoney: { max: "", min: "" },
    overdueDays: { max: "", min: "" },
    followupTime: { max: "", min: "" },
    leaveDueDate: { max: "", min: "" },
    billDate: { max: "", min: "" },
    lockTime: { max: "", min: "" },
    payDate: { max: "", min: "" },
    overduePeriod: { max: "", min: "" },
    overdueAmount: { max: "", min: "" },
    productNo: "",
    caseNumber: "",
    personalName: "",
    mobileNo: "",
    idCard: "",
    principalId: "",
    bankName: "",
    businessAddress: "",
    boardAddress: "",
    carNo: "",
    dataFromSource: "",
    deptId: "",
    currentCollectorRealName: "",
    partnerName: "",
    batchNumber: "",
    caseMark: ""
  };
  private dialog: any = {
    addAgent: false,
    ManualDivision: false
  };
  private rules: any = {
    mobileNo: [{ validator: this.$validator.phoneNumber, trigger: "change" }],
    idCard: [{ validator: this.$validator.idcardUscc, trigger: "change" }]
  };
  private dataSet: any[] = [];
  private selectionList: any = [];
  private handworkCodeArr: any = []
  private caseTotalData: any = {};
  private showGuzhi: boolean = true;

  private get allMoney() {
    // 计算选择的总金额
    let num;
    return (num = this.selectionList.reduce((prev, cur) => {
      return cur.sumMoney + prev;
    }, 0));
  }

  private onSelectionChange(list) { } // 表格选中

  private mounted() {
    this.refreshData();
    this.getObjectiveCode()
  }

  private getObjectiveCode() {
    this.userService.findAlreadyEffectCodeByType({ code: 'SG_CODE' }).subscribe(data => {
      this.handworkCodeArr = data
    });
  }

  private paramsHandler() {
    // 查询条件
    const params = { ...this.model };
    params.overdueAmountMax = this.model.overdueAmount.max;
    params.overdueAmountMin = this.model.overdueAmount.min;
    params.overduePeriodMax = this.model.overduePeriod.max;
    params.overduePeriodMin = this.model.overduePeriod.min;
    params.caseMoneyMax = this.model.caseMoney.max;
    params.caseMoneyMin = this.model.caseMoney.min;
    params.overdueDaysMax = this.model.overdueDays.max;
    params.overdueDaysMin = this.model.overdueDays.min;
    params.payDateMax = this.model.payDate.max
    params.payDateMin = this.model.payDate.min
    // params.payDateMax = this.$filter.dateRanageFormat(this.model.payDate).end;
    // params.payDateMin = this.$filter.dateRanageFormat(this.model.payDate).start;
    params.billDateMax = this.model.billDate.max
    params.billDateMin = this.model.billDate.min
    // params.billDateMax = this.$filter.dateRanageFormat(this.model.billDate).end;
    // params.billDateMin = this.$filter.dateRanageFormat(this.model.billDate).start;
    params.lockTimeMax = this.$filter.dateRanageFormat(
      this.model.lockTime
    ).end;
    params.lockTimeMin = this.$filter.dateRanageFormat(this.model.lockTime).start;
    params.leaveDueDateMax = this.$filter.dateRanageFormat(
      this.model.leaveDueDate
    ).end;
    params.leaveDueDateMin = this.$filter.dateRanageFormat(
      this.model.leaveDueDate
    ).start;
    params.followupTimeMin = this.$filter.dateRanageFormat(
      this.model.followupTime
    ).start;
    params.followupTimeMax = this.$filter.dateRanageFormat(
      this.model.followupTime
    ).end;
    delete params.caseMoney;
    delete params.overdueDays;
    delete params.payDate;
    delete params.billDate;
    delete params.lockTime;
    delete params.leaveDueDate;
    delete params.followupTime;
    delete params.overduePeriod;
    delete params.overdueAmount;
    return params;
  }

  private queryPageInfo() {
    // 法诉 - 团队
    if (this.queueType === 'TEAM') {
      if (
        this.model.caseNumber &&
        this.$validator.regex.isChineseComma.test(this.model.caseNumber)
      )
        return this.$message.error("请用英文逗号！");
      const request: any = {
        ...this.paramsHandler()
      };
      this.getCaseAmount()
      this.legallyCaseManageService.teamCasePool(request, this.pageService, this.sortService).subscribe(data => {
        this.dataSet = data;
        this.selectionList = [];
      });
    } else {
      // 电催
      if (
        this.model.caseNumber &&
        this.$validator.regex.isChineseComma.test(this.model.caseNumber)
      )
        return this.$message.error("请用英文逗号！");
      const request: any = {
        ...this.paramsHandler()
      };
      this.getCaseAmount()
      this.telCaseManageService
        .teamCasePool(request, this.pageService, this.sortService)
        .subscribe(data => {
          this.dataSet = data;
          this.selectionList = [];
        });
    }
  }

  private refreshData() {
    this.queryPageInfo();
  }

  /**
   * 表单范围输入框重置
   */
  private handleResetForm() {
    this.model.overdueDays = { min: "", max: "" };
    this.model.followupTime = { min: "", max: "" };
    this.model.leaveDueDate = { min: "", max: "" };
    this.model.lockTime = { min: "", max: "" };
    this.model.billDate = { min: "", max: "" };
    this.model.payDate = { min: "", max: "" };
    this.model.overduePeriod = { min: "", max: "" };
    this.model.caseMoney = { min: "", max: "" };
    this.model.overdueAmount = { min: "", max: "" };
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.updatePersonalType(row.personalType);
    if (this.queueType === 'TEAM') {
      this.$router.openCaseDetail(row.id, {
        menuChannel: MENU_CHANNEL.Legal_team,
        otherData: {
          data: this.model,
          page: this.pageService,
          sort: this.sortService
        }
      });
    } else {
      this.$router.openCaseDetail(row.id, {
        menuChannel: MENU_CHANNEL.Tel_team,
        otherData: {
          data: this.model,
          page: this.pageService,
          sort: this.sortService
        }
      });
    }
  }
  /**
   * 团案统计
   */
  private getCaseAmount() {
    // 法诉
    if (this.queueType === 'TEAM') {
      this.legallyCaseManageService
        .teamCasePoolAmount(this.paramsHandler())
        .subscribe(data => {
          this.caseTotalData = data;
        });
    } else {
      this.telCaseManageService
        .teamCasePoolAmount(this.paramsHandler())
        .subscribe(data => {
          this.caseTotalData = data;
        });
    }
  }
  private departemntChange(id, code) { }

  private dialogCancel() {
    this.refreshData();
    this.transferDialog = false;
  }

  private confirmTransferDialog() {
    // 确定转派
    this.refreshData();
    this.isSelectAll = false;
  }

  private selectAll(type) {
    this.isSelectAll = type;
  }

  private manualDivision() {
    // 转派按钮
    this.isSelectAll ? (this.allData = this.dataSet) : (this.allData = []);
    this.transferDialog = true;
  }
}
</script>

<style lang="less">
.tel-team-case-manage {
  .dialog-title {
    text-align: center;
    margin-bottom: 26px;
  }
  .el-form-item__label {
    width: 130px !important;
  }
  .cancel-select-all {
    line-height: 26px;
    padding: 0;
    min-width: 100px;
    font-size: 12px;
    font-weight: 400;
  }
}
</style>
